<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>服务商品</h2>
        </template>
        <template v-slot:after>
          <el-button class="filter-item" size="medium" style="margin-left: 10px;" type="primary" icon="el-icon-edit" :disabled="!checkPermission('product-add')" @click="addOrEidt('add',0)">{{ $t('button.add') }}</el-button>
        </template>
      </PageTitle>
      <!-- 搜索筛选 -->
      <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="4">
          <el-input v-model="query.name" type="text" :placeholder="$t('table.productName')" />
        </el-col>
        <el-col :span="3">
          <el-select v-model.number="query.cid" :placeholder="$t('table.selectThe')+$t('route.productCate')" style="width: 100%;" clearable @clear="clearCate">
            <el-option-group v-for="(item,index) in cateList" :key="index" :label="item.name" :value="item.id">
              <el-option v-for="(item1,index1) in item.children" :key="index1" :label="item1.name" :value="item1.id" />
            </el-option-group>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model.number="query.gid" :placeholder="$t('table.selectThe')+$t('route.ShopGroup')" style="width: 100%;" clearable @clear="clearGroup">
            <el-option v-for="(item,index) in grouplist" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model.number="query.status" :placeholder="$t('table.selectThe')+$t('table.state')" clearable @clear="clearStatus">
            <el-option v-for="(item,index) in statusData" :key="index" :label="item.value" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <!-- 批量操作 -->
      <el-row style="margin-top: 20px;">
        <el-col :span="24">
          <el-button icon="el-icon-delete-solid" :disabled="!checkPermission('product-Pdel')" @click="BatchDelete()">{{ $t('button.piDel') }}</el-button>
          <el-button type="primary" icon="el-icon-upload2" :disabled="!checkPermission('product-shang')" @click="ProductStatusAdd(1)">{{ $t('button.piShang') }}</el-button>
          <el-button type="primary" icon="el-icon-download" :disabled="!checkPermission('product-shang')" @click="ProductStatusAdd(0)">{{ $t('button.piXia') }}</el-button>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" tooltip-effect="dark" border :data="list" max-height="550px" style="margin-top: 20px;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="ID" prop="shop_product.id" sortable="custom" width="60" />
        <el-table-column :label="$t('table.commodity_information')" prop="shop_goods" width="300">
          <template slot-scope="{row}">
            <div class="shopGoods-item">
              <div class="shopGoos_img"><img :src="row.shop_product.pic" width="100%"></div>
              <div class="shopGoos_wen">
                <p>{{ row.shop_product.name }}</p>
                <p class="goodsPrice">¥ {{ row.shop_product.sell_price }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.ShopCate')" prop="name" width="350">
          <template slot-scope="{row}">
            <label>{{ row.shop_product.cate_name }}</label>
            <label v-if="row.shop_product.cate_name2!==''">,{{ row.shop_product.cate_name2 }}</label>
            <label v-if="row.shop_product.cate_name3!==''">,{{ row.shop_product.cate_name3 }}</label>
            <label v-if="row.shop_product.cate_name4!==''">,{{ row.shop_product.cate_name4 }}</label>
            <label v-if="row.shop_product.cate_name5!==''">,{{ row.shop_product.cate_name5 }}</label>
            <label v-if="row.shop_product.cate_name6!==''">,{{ row.shop_product.cate_name6 }}</label>
          </template>
        </el-table-column>
        <el-table-column label="商品类型" prop="shop_product.type" width="120">
          <template slot-scope="{row}">
            {{ row.shop_product.type|formTypeShop }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.stock')" prop="shop_product.stock" />
        <el-table-column prop="shop_product.sales" :label="$t('table.sales')" />
        <el-table-column :label="$t('table.state')" prop="shop_product.status" width="120">
          <template slot-scope="{row}">
            <el-tag :type="row.shop_product.status|statusFilter">
              {{ row.shop_product.status|formStatusShop }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="shop_product.sort" :label="$t('table.sort')" width="250">
          <template slot-scope="{row}">
            <template v-if="row.isedit">
              <el-input v-model="row.shop_product.sort" class="edit-input" size="small" style="width: 50%;" />
              <el-button
                style="margin-left: 10px;"
                class="cancel-btn"
                size="small"
                icon="el-icon-refresh"
                type="warning"
                @click="confirmEdit(row)"
              >
                {{ $t('button.confirm') }}
              </el-button>
            </template>
            <span v-else>{{ row.shop_product.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.creationTime')" prop="shop_product.createtime" width="180">
          <template slot-scope="{row}">
            {{ row.shop_product.created_at|timeStanp }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="center" width="380" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" type="primary" size="mini" :disabled="!checkPermission('product-edit')" @click="addOrEidt('edit',row)">{{ $t('button.edit') }}</el-button>
            <el-button v-if="row.isedit" type="warning" size="mini" @click="cancelEdit(row)">
              {{ $t('button.cancel') }}
            </el-button>
            <el-button v-else type="warning" size="mini" :disabled="!checkPermission('product-set')" @click="paixu(row)">
              {{ $t('table.sort') }}
            </el-button>
            <el-button icon="el-icon-delete" type="dang er" size="mini" :disabled="!checkPermission('product-del')" @click="delData(row.shop_product.id)">{{ $t('button.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="query.limit" :current-page="query.page" @current-change="changPage" />
      </el-row>
    </div>
    <!-- 添加 -->
    <el-dialog :title="dialogTitle" :visible="showDialog" width="70%" top="40px" @opened="openDialog" @close="btnCanle">
      <div class="shopOrder-dialog">
        <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="220px">
          <el-form-item label="商品类型" prop="type">
            <el-select v-model.number="formData.type" :placeholder="$t('table.selectThe')+'商品类型'">
              <template v-for="(item,index) in typeData">
                <el-option v-if="item.id!==9" :key="index" :label="item.value" :value="item.id" />
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="所属栏目" prop="cate_id">
            <el-select v-model="formData.cate_id" placeholder="请选择所属栏目" prop="cate_id">
              <el-option-group v-for="(item,index) in cateList" :key="index" :label="item.name">
                <el-option v-for="(item1,index1) in item.children" :key="index1" :label="item1.name" :value="item1.id" />
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item label="附属栏目">
            <el-select v-model="formData.cate_id2" placeholder="请选择附属栏目1" class="select-cate">
              <el-option-group v-for="(item,index) in cateList" :key="index" :label="item.name">
                <el-option v-for="(item1,index1) in item.children" :key="index1" :label="item1.name" :value="item1.id" />
              </el-option-group>
            </el-select>
            <el-select v-model="formData.cate_id3" placeholder="请选择附属栏目2" class="select-cate">
              <el-option-group v-for="(item,index) in cateList" :key="index" :label="item.name">
                <el-option v-for="(item1,index1) in item.children" :key="index1" :label="item1.name" :value="item1.id" />
              </el-option-group>
            </el-select>
            <el-select v-model="formData.cate_id4" placeholder="请选择附属栏目2" class="select-cate">
              <el-option-group v-for="(item,index) in cateList" :key="index" :label="item.name">
                <el-option v-for="(item1,index1) in item.children" :key="index1" :label="item1.name" :value="item1.id" />
              </el-option-group>
            </el-select>
            <el-select v-model="formData.cate_id5" placeholder="请选择附属栏目3" class="select-cate">
              <el-option-group v-for="(item,index) in cateList" :key="index" :label="item.name">
                <el-option v-for="(item1,index1) in item.children" :key="index1" :label="item1.name" :value="item1.id" />
              </el-option-group>
            </el-select>
            <el-select v-model="formData.cate_id6" placeholder="请选择附属栏目4" class="select-cate">
              <el-option-group v-for="(item,index) in cateList" :key="index" :label="item.name">
                <el-option v-for="(item1,index1) in item.children" :key="index1" :label="item1.name" :value="item1.id" />
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('table.productName')" prop="name">
            <el-input v-model="formData.name" :placeholder="$t('table.enterThe')+' '+$t('table.productName')" style="width:50%" />
          </el-form-item>
          <el-form-item label="副标题" prop="sub_name">
            <el-input v-model="formData.sub_name" :placeholder="$t('table.enterThe')+'副标题'" style="width:50%" />
          </el-form-item>
          <el-form-item label="Tag标签" prop="tag">
            <el-input v-model="formData.tag" :placeholder="$t('table.enterThe')+'Tag标签'" style="width:50%" />
          </el-form-item>
          <el-form-item :label="$t('table.ShopPic')" prop="pic">
            <ImageUpload ref="staffPhoto" />
          </el-form-item>
          <el-form-item :label="$t('table.ShopPics')" prop="pics">
            <ImagesUpload ref="picsPhoto" />
          </el-form-item>
          <el-form-item :label="$t('route.ShopGroup')">
            <el-select v-model="gid" :multiple="true" :multiple-limit="7" :placeholder="$t('table.selectThe')+' '+$t('route.ShopGroup')" style="width: 80%;">
              <el-option v-for="(item,index) in grouplist" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('table.specsSet')">
            <table class="ljm-table" cellspacing="0" cellpadding="0">
              <thead>
                <tr>
                  <th>{{ $t('table.GuigeType') }}</th>
                  <th>{{ $t('table.GuiGeName') }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in specList" :key="index">
                  <td>
                    <input v-model="item.title" type="text" class="layui-input" :placeholder="$t('table.GuigeType')" name="ggname" style="width:120px">
                  </td>
                  <td>
                    <div v-for="(item1,index1) in item.items" :key="index1">
                      <input v-model="item1.title" type="text" class="layui-input" style="width:180px" :placeholder="$t('table.GuiGeName')">
                      <button v-if="item1.k===0" type="button" class="layui-btn layui-btn-sm layui-btn-primary" style="margin-top:-3px;" @click="addggname(item)">
                        <i class="el-icon-plus" style="font-size:14px!important;font-weight: bold;" />
                      </button>
                      <button v-else type="button" class="layui-btn layui-btn-sm layui-btn-primary" style="margin-top:-3px;" @click="removeggname(index1,item)">
                        <i class="el-icon-close" style="font-size:14px!important;font-weight: bold;" />
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="Ggname-prompt">
              <p>{{ $t('prompt.GuiGeTip') }}</p>
              <p>{{ $t('prompt.GuiGeTip1') }}</p>
              <p>{{ $t('prompt.GuiGeTip2') }}</p>
            </div>
            <div>
              <el-button type="primary" icon="el-icon-refresh" plain size="small" @click="RefreshGgname">{{ $t('button.RefreshSpecification') }}</el-button>
            </div>
            <!-- 编辑各个规格的信息 -->
            <table class="ljm-table" cellspacing="0" cellpadding="0" style="margin-top: 20px;">
              <thead>
                <tr>
                  <th v-for="(item,index) in specListTitle" :key="index">{{ item }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in specListVal" :key="index">
                  <td v-for="(item1,index1) in item.namelist" :key="index1" :rowspan="item1.rowspan">{{ item1.name }}</td>
                  <td><input v-model="item.barcode" class="layui-input" type="text" style="width:100px;"></td>
                  <td><input v-model.number="item.market_price" class="layui-input" type="text" style="width:60px;"></td>
                  <td><input v-model.number="item.sell_price" class="layui-input" type="text" style="width:60px;"></td>
                  <td><input v-model.number="item.givescore" class="layui-input" type="text" style="width:50px;"></td>
                  <td><ImgUpload ref="pic" :message="item.pic" @change="costPlannedAmountChange(index,$event)" /></td>
                  <td>
                    <el-button type="primary" plain size="small" @click="AddGuanLian(index)">新增关联</el-button>
                    <div v-for="(item2,index2) in item.stock" :key="index2" class="guanlian">
                      <div>{{ item2.name }}</div>
                      <div>--</div>
                      <div>
                        <label>次数：</label>
                        <input v-model.number="item2.num" class="layui-input" type="text" style="width:50px;">
                      </div>
                      <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" style="margin-top:-3px;" @click="removeggnameG(index,index2)">
                        <i class="el-icon-close" style="font-size:14px!important;font-weight: bold;" />
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </el-form-item>
          <el-form-item label="服务区域">
            <div>
              <table class="ljm-table" cellspacing="0" cellpadding="0">
                <thead>
                  <tr>
                    <th>{{ $t('table.templateId') }}</th>
                    <th>{{ $t('table.templateName') }}</th>
                    <th>{{ $t('table.actions') }}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item,index) in fuwuList" :key="index">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>
                      <el-button size="mini" @click="removeFreightArr('fuwu',index)">{{ $t('button.delete') }}</el-button>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="3">
                      <el-button type="primary" size="mini" plain @click="openFreight('fuwu')">{{ $t('button.add') }}</el-button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-form-item>
          <el-form-item label="推荐商品">
            <div>
              <table class="ljm-table" cellspacing="0" cellpadding="0">
                <thead>
                  <tr>
                    <th>{{ $t('table.templateId') }}</th>
                    <th>{{ $t('table.templateName') }}</th>
                    <th>{{ $t('table.actions') }}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item,index) in shopList" :key="index">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>
                      <el-button size="mini" @click="removeFreightArr('shop',index)">{{ $t('button.delete') }}</el-button>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="3">
                      <el-button type="primary" size="mini" plain @click="openFreight('shop')">{{ $t('button.add') }}</el-button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-form-item>
          <el-form-item :label="$t('table.scoredkmaxset')">
            <el-radio-group v-model.number="formData.scoredkmaxset" @input="changeInput">
              <el-radio :label="0">{{ $t('table.Deductaccordingtosystemsettings') }}</el-radio>
              <el-radio :label="1">{{ $t('table.Setdeductionratioseparately') }}</el-radio>
              <el-radio :label="2">{{ $t('table.Setdeductionamountseparately') }}</el-radio>
              <el-radio :label="-1">{{ $t('table.Noteligibleforpointsdeduction') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="formData.scoredkmaxset>0" :label="$t('table.scoredkmaxval')+'('+danwei+')'">
            <el-input v-model.number="formData.scoredkmaxval" style="width:10%" />
          </el-form-item>
          <el-form-item :label="$t('table.sales')">
            <el-input v-model.number="formData.sales" style="width:10%" />
          </el-form-item>
          <el-form-item :label="$t('table.state')" prop="status">
            <el-select v-model.number="formData.status" :placeholder="$t('table.selectThe')+' '+$t('table.state')">
              <template v-for="(item,index) in statusData">
                <el-option v-if="item.id!==9" :key="index" :label="item.value" :value="item.id" />
              </template>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('table.shopDetail')">
            <RichText ref="child" :values="formData.detail" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCanle">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" @click="btnOk">{{ $t('button.confirm') }}</el-button>
      </div>
    </el-dialog>
    <!-- 服务区域选择 -->
    <el-dialog :title="$t('table.freighttype')" :visible="showDialogFuwu" width="50%" @close="btnCanle2">
      <el-table v-loading="LoadingFuwu" border :data="regionlist" max-height="350px" style="margin-top: 20px;">
        <el-table-column :label="$t('table.templateId')" prop="id" width="100" />
        <el-table-column :label="$t('table.ForeignLanguageName')" prop="name" />
        <el-table-column :label="$t('table.RegionandPrice')" prop="pricedata">
          <template slot-scope="{row}">
            <div v-html="priceFuwuHtml(row.pricedata)" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" type="primary" size="mini" @click="selectF(row)">{{ $t('button.select') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 商品选择 -->
    <el-dialog title="推荐商品选择" :visible="showDialogS" width="50%" @close="btnCanleS">
      <!-- 搜索筛选 -->
      <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="6">
          <el-input v-model="queryS.name" type="text" :placeholder="$t('table.productName')" />
        </el-col>
        <el-col :span="6">
          <el-select v-model.number="queryS.cid" :placeholder="$t('table.selectThe')+$t('route.productCate')" style="width: 100%;" clearable @clear="clearCate">
            <el-option-group v-for="(item,index) in cateList" :key="index" :label="item.name" :value="item.id">
              <el-option v-for="(item1,index1) in item.children" :key="index1" :label="item1.name" :value="item1.id" />
            </el-option-group>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="searchS">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="downloadLoadingS" tooltip-effect="dark" border :data="listS" max-height="650px" style="margin-top: 20px;">
        <el-table-column type="selection" width="55" />
        <el-table-column label="ID" prop="shop_product.id" sortable="custom" width="60" />
        <el-table-column :label="$t('table.commodity_information')" prop="shop_goods" width="300">
          <template slot-scope="{row}">
            <div class="shopGoods-item">
              <div class="shopGoos_img"><img :src="row.shop_product.pic" width="100%"></div>
              <div class="shopGoos_wen">
                <p>{{ row.shop_product.name }}</p>
                <p class="goodsPrice">¥ {{ row.shop_product.sell_price }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.stock')" prop="shop_product.stock" />
        <el-table-column prop="shop_product.sales" :label="$t('table.sales')" />
        <el-table-column :label="$t('table.actions')" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" type="primary" size="mini" @click="selectS(row)">{{ $t('button.select') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="countS" :page-size="queryS.limit" :current-page="queryS.page" @current-change="changPageS" />
      </el-row>
    </el-dialog>
    <!-- 服务选择 -->
    <el-dialog title="服务项目关联" :visible="showDialogG" width="50%" @close="btnCanleG">
      <!-- 搜索筛选 -->
      <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="6">
          <el-input v-model="queryG.name" type="text" placeholder="请输入项目名称" />
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="searchG">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="downloadLoadingG" tooltip-effect="dark" border :data="guanlianlist" max-height="650px" style="margin-top: 20px;">
        <el-table-column label="ID" prop="id" sortable="custom" width="60" />
        <el-table-column :label="$t('table.ForeignLanguageName')" prop="name" />
        <el-table-column label="市场价" prop="market_price" />
        <el-table-column label="销售价" prop="sell_price" />
        <el-table-column label="阿姨结算价" prop="cost_price" />
        <el-table-column :label="$t('table.state')" prop="status" width="120">
          <template slot-scope="{row}">
            <el-tag :type="row.status|statusFilter">
              {{ row.status|formStatusData }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" type="primary" size="mini" @click="selectG(row)">{{ $t('button.select') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="countG" :page-size="queryG.limit" :current-page="queryG.page" @current-change="changPageG" />
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getShopGroupList, getShopCateList, GetFuwuProduct, getRegionList, AddFuProduc, FuProducSort, FuProducStatus, FuProducDel, FuShopList } from '@/api/user'
import user from '@/store/modules/user'
import { tranListTotreeDatCate, specListValForFu, convertSpecsListToSpecListValFu, editSpecsListToSpecListValFu } from '@/utils'
export default ({
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      listS: [],
      count: 0,
      countS: 0,
      countG: 0,
      grouplist: [],
      guanlianlist: [],
      freghtlist: [],
      multipleSelection: [],
      gid: [],
      regionlist: [],
      downloadLoading: false,
      downloadLoadingS: false,
      downloadLoadingG: false,
      LoadingFuwu: false,
      LoadingFreght: false,
      showDialog: false,
      showDialogFuwu: false,
      showDialogFreight: false,
      showDialogS: false,
      showDialogG: false,
      dialogTitle: this.$t('button.add'),
      statusData: [{
        id: 0,
        value: this.$t('table.Notlisted')
      },
      {
        id: 1,
        value: this.$t('table.Listed')
      },
      {
        id: 9,
        value: this.$t('table.all')
      }],
      typeData: [

        {
          id: 1,
          value: '服务商品'
        }],
      query: {
        id: undefined,
        name: '',
        aid: 1,
        cid: undefined,
        bid: undefined,
        gid: undefined,
        status: 9,
        page: 1,
        limit: 10
      },
      queryS: {
        name: '',
        aid: 1,
        cid: undefined,
        status: 1,
        limit: 10,
        page: 1
      },
      queryG: {
        id: 1,
        name: '',
        aid: 1,
        page: 1,
        limit: 10
      },
      formData: {
        id: undefined,
        aid: 1,
        bid: undefined,
        cate_id: undefined,
        cate_id2: undefined,
        cate_id3: undefined,
        cate_id4: undefined,
        cate_id5: undefined,
        cate_id6: undefined,
        gid: undefined,
        gid1: undefined,
        gid2: undefined,
        gid3: undefined,
        gid4: undefined,
        gid5: undefined,
        gid6: undefined,
        name: '',
        sub_name: '',
        pic: '',
        pics: '',
        sales: 0,
        detail: '',
        market_price: undefined,
        sell_price: undefined,
        givescore: undefined,
        sort: 0,
        status: 1,
        freighttype: 0,
        freightdata: '',
        scoredkmaxset: -1,
        scoredkmaxval: 0,
        guige_list: [],
        tj_proid: '',
        tag: '',
        type: 1
      },
      rules: {
        name: [{ required: true, message: this.$t('table.name') + this.$t('prompt.noEmpty'), trigger: 'blur' }],
        status: [{ required: true, message: this.$t('table.state') + this.$t('prompt.noEmpty'), trigger: 'blur' }],
        cate_id: [{ required: true, message: '所属栏目' + this.$t('prompt.noEmpty'), trigger: 'blur' }]
      },
      specList: [{ 'k': 0, 'title': '规格', 'items': [{ 'k': 0, 'title': '默认规格' }] }],
      specListTitle: ['规格', this.$t('table.Specificationcode'), this.$t('table.market_price'), this.$t('table.sell_price'), this.$t('table.Bonuspoints'), this.$t('table.images'), '关联服务'],
      specListVal: [{ namelist: [{ name: '默认规格', rowspan: 1 }], pic: '', market_price: undefined, sell_price: undefined, givescore: undefined, barcode: '', stock: [] }],
      freightList1: [],
      specListVallist: [],
      fuwuList: [],
      shopList: [],
      guanlianId: 0,
      cateList: []
    }
  },
  created() {
    // 获取userid
    this.query.bid = parseFloat(user.state.userInfo.bid)
    this.formData.bid = parseFloat(user.state.userInfo.bid)
    this.getProductList()
    this.getShopGroup()
    this.getShopCate()
    this.getListFuWu()
    this.getList()
  },
  methods: {
    // 新增关联商品
    AddGuanLian(index) {
      this.guanlianId = index
      this.showDialogG = true
    },
    // 规格图片子组件传值事件处理函数
    async costPlannedAmountChange(index, value) {
      this.specListVal[index].pic = value
    },
    // 点击展开新增修改
    addOrEidt(type, row) {
      if (type === 'add') {
        this.dialogTitle = this.$t('button.add')
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      } else if (type === 'edit') {
        this.dialogTitle = this.$t('button.edit')
        this.formData.id = row.shop_product.id
        this.formData.cate_id = row.shop_product.cate_id
        if (row.shop_product.cate_id2 > 0) {
          this.formData.cate_id2 = row.shop_product.cate_id2
        }
        if (row.shop_product.cate_id3 > 0) {
          this.formData.cate_id3 = row.shop_product.cate_id3
        }
        if (row.shop_product.cate_id4 > 0) {
          this.formData.cate_id4 = row.shop_product.cate_id4
        }
        if (row.shop_product.cate_id5 > 0) {
          this.formData.cate_id5 = row.shop_product.cate_id5
        }
        if (row.shop_product.cate_id5 > 0) {
          this.formData.cate_id6 = row.shop_product.cate_id6
        }
        if (row.shop_product.gid > 0) {
          this.gid.push(row.shop_product.gid)
        }
        if (row.shop_product.gid1 > 0) {
          this.gid.push(row.shop_product.gid1)
        }
        if (row.shop_product.gid2 > 0) {
          this.gid.push(row.shop_product.gid2)
        }
        if (row.shop_product.gid3 > 0) {
          this.gid.push(row.shop_product.gid3)
        }
        if (row.shop_product.gid4 > 0) {
          this.gid.push(row.shop_product.gid4)
        }
        if (row.shop_product.gid5 > 0) {
          this.gid.push(row.shop_product.gid5)
        }
        if (row.shop_product.gid6 > 0) {
          this.gid.push(row.shop_product.gid6)
        }
        this.formData.name = row.shop_product.name
        this.formData.sub_name = row.shop_product.sub_name
        this.formData.status = row.shop_product.status
        this.formData.pic = row.shop_product.pic
        this.formData.sort = row.shop_product.sort
        this.formData.pics = row.shop_product.pics
        this.formData.sales = row.shop_product.sales
        this.formData.detail = row.shop_product.detail
        this.formData.guigedata = row.shop_product.guigedata
        this.formData.scoredkmaxset = row.shop_product.scoredkmaxset
        this.formData.scoredkmaxval = row.shop_product.scoredkmaxval
        this.formData.type = row.shop_product.type
        this.formData.tag = row.shop_product.tag
        this.formData.freighttype = row.shop_product.freighttype
        this.formData.tj_proid = row.shop_product.tj_proid
        // 渲染现有规格
        const oldArr = [this.$t('table.Specificationcode'), this.$t('table.market_price'), this.$t('table.sell_price'), this.$t('table.Bonuspoints'), this.$t('table.images'), '关联服务']

        const NewArr = []
        this.specList = JSON.parse(row.shop_product.guigedata)
        // 重新定义规格表头specListTitle
        this.specList.forEach(item => {
          NewArr.push(item.title)
        })
        oldArr.forEach(item => {
          NewArr.push(item)
        })
        this.specListTitle = NewArr // 将重新定义的表头赋值
        this.specListVal = editSpecsListToSpecListValFu(JSON.parse(row.shop_product.guigedata), row.fu_gui_ge)
        this.specListVallist = specListValForFu(JSON.parse(row.shop_product.guigedata))
        // 服务区域/物流模版
        const freightdata = row.shop_product.freightdata.split(',')
        freightdata.forEach(item => {
          this.regionlist.forEach(element => {
            if (parseFloat(item) === element.id) {
              this.fuwuList.push(element)
            }
          })
        })
        // 渲染推荐商品
        if (row.tj_product !== null) {
          this.shopList = row.tj_product
        }
        console.log(this.shopList)
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      }
    },
    // 提交
    async btnOk() {
      try {
        // 校验整个表单
        await this.$refs.ruleForm.validate()
        // 读取上传组件的数据
        const fileList = this.$refs.staffPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        this.formData = { ...this.formData, pic: fileList && fileList.length ? fileList[0].url : '' }
        // 读取上传组件的数据
        const picsPhoto = this.$refs.picsPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (picsPhoto.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const pics = []
        for (let i = 0; i < picsPhoto.length; i++) {
          pics.push(picsPhoto[i].url)
        }
        this.formData.pics = pics.toString(',')
        for (let i = 0; i < this.gid.length; i++) {
          if (i === 0) {
            this.formData.gid = this.gid[i]
          } else if (i === 1) {
            this.formData.gid1 = this.gid[i]
          } else if (i === 2) {
            this.formData.gid2 = this.gid[i]
          } else if (i === 3) {
            this.formData.gid3 = this.gid[i]
          } else if (i === 4) {
            this.formData.gid4 = this.gid[i]
          } else if (i === 5) {
            this.formData.gid5 = this.gid[i]
          } else if (i === 6) {
            this.formData.gid6 = this.gid[i]
          }
        }
        // 获取富文本编辑内容
        this.formData.detail = this.$refs.child.getVal()
        // 规格数据
        this.formData.guigedata = JSON.stringify(this.specList)
        // 判断当前是商品类型
        // 获取服务模版
        if (this.fuwuList.length > 0) {
          const fuwuId = []
          this.fuwuList.forEach(item => {
            fuwuId.push(item.id)
          })
          this.formData.freightdata = fuwuId.toString(',')
        }
        // 格式化推荐商品id
        if (this.shopList.length > 0) {
          const ShopId = []
          this.shopList.forEach(item => {
            ShopId.push(item.id)
          })
          this.formData.tj_proid = ShopId.toString(',')
        }
        this.formData.market_price = parseFloat(this.specListVal[0].market_price)
        this.formData.sell_price = parseFloat(this.specListVal[0].sell_price)
        this.formData.givescore = parseFloat(this.specListVal[0].givescore)
        // 处理规格明细
        if (this.specListVal.length > 0) {
          for (let i = 0; i < this.specListVal.length; i++) {
            const name = []
            this.specListVallist[i].namelist.forEach(m => { // 循环规格的名称
              name.push(m.name)
            })
            const one = {
              name: name.toString(','),
              pic: this.specListVal[i].pic,
              market_price: parseFloat(this.specListVal[i].market_price),
              sell_price: parseFloat(this.specListVal[i].sell_price),
              givescore: parseFloat(this.specListVal[i].givescore),
              stock: this.specListVal[i].stock,
              ks: this.specListVal[i].ks,
              barcode: this.specListVal[i].barcode
            }
            this.formData.guige_list.push(one)
          }
        }
        // 调用新增接口
        await AddFuProduc(this.formData)
        // 更新数据
        this.getProductList()
        // 取消弹窗
        this.btnCanle()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 删除
    async delData(e) {
      const data = {
        id: []
      }
      data.id.push(e)
      try {
        await this.$confirm(this.$t('prompt.deleteit'))
        await FuProducDel(data)
        this.getProductList()
        this.$message.success(this.$t('prompt.deletesuccess'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 批量删除
    async BatchDelete() {
      const data = {
        id: []
      }
      if (this.multipleSelection.length === 0) {
        this.$message.error(this.$t('prompt.noEmpty'))
        return
      }
      this.multipleSelection.forEach(item => {
        data.id.push(item.shop_product.id)
      })
      try {
        await this.$confirm(this.$t('prompt.deleteit'))
        await FuProducDel(data)
        this.getProductList()
        this.$message.success(this.$t('prompt.deletesuccess'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 批量上架
    async ProductStatusAdd(index) {
      const data = {
        id: [],
        status: index
      }
      if (this.multipleSelection.length === 0) {
        this.$message.error(this.$t('prompt.noEmpty'))
        return
      }
      this.multipleSelection.forEach(item => {
        data.id.push(item.shop_product.id)
      })
      try {
        await this.$confirm(this.$t('prompt.deleteit'))
        await FuProducStatus(data)
        this.getProductList()
        this.$message.success(this.$t('prompt.deletesuccess'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 监听单选
    changeInput(e) {
      if (e === 2) {
        this.danwei = 'R$'
      } else if (e === 1) {
        this.danwei = '%'
      }
    },
    // 刷新规格
    RefreshGgname() {
      const oldArr = [this.$t('table.Specificationcode'), this.$t('table.market_price'), this.$t('table.sell_price'), this.$t('table.Bonuspoints'), this.$t('table.images'), '关联服务']

      const NewArr = []
      this.formData.guige_list = []
      // 重新定义规格表头specListTitle
      this.specList.forEach(item => {
        NewArr.push(item.title)
      })
      oldArr.forEach(item => {
        NewArr.push(item)
      })
      this.specListVallist = specListValForFu(this.specList)
      this.specListVal = convertSpecsListToSpecListValFu(this.specList)
      this.specListTitle = NewArr // 将重新定义的表头赋值
      // 重新渲染规格
    },
    // 新增规格组
    addGgArr() {
      // 获取当前的规格组数量,定义一个对象
      const one = {
        'k': this.specList.length,
        'title': '',
        'items': [{ 'k': 0, 'title': '' }]
      }
      this.specList.push(one)
    },
    // 移除当前规格
    removeGgArr(index) {
      this.specList.splice(index, 1)// splice(index,1)函数删除该索引的数组对象
    },
    // 新增一条规格值
    addggname(e) {
      // 获取当前的规格值数量,定义一个对象
      const one = {
        'k': e.items.length,
        'title': ''
      }
      // 将新的对象追加到当前的数组
      this.specList.forEach(item => {
        if (item.k === e.k) {
          item.items.push(one)
        }
      })
    },
    // 移除当前的规格值
    removeggname(k, n) {
      this.specList.forEach(item => {
        if (item.k === n.k) {
          // 使用splice指定索引删除数组元素
          item.items.splice(k, 1)
        }
      })
    },
    // 移除当前的项目
    removeggnameG(k, n) {
      this.specListVal[k].stock.splice(n, 1)
    },
    // 获取商品列表
    async getProductList() {
      this.downloadLoading = true
      const { count, list } = await GetFuwuProduct(this.query)
      this.count = count
      // 给数组对象使用map循环添加新属性
      if (count > 0) {
        const lists = list.map((item, index) => {
          return Object.assign(item, { isedit: false })
        })
        this.list = lists
      } else {
        this.list = list
      }
      this.downloadLoading = false
    },
    // 获取商品列表
    async getProductListS() {
      this.downloadLoadingS = true
      const { count, list } = await GetFuwuProduct(this.queryS)
      this.countS = count
      // 给数组对象使用map循环添加新属性
      this.listS = list
      this.downloadLoadingS = false
    },
    // 获取分类列表
    async getShopCate() {
      const query = {
        id: undefined,
        bid: parseFloat(user.state.userInfo.bid),
        type: 1,
        aid: 1,
        page: 1,
        limit: 1000
      }
      const { list } = await getShopCateList(query)
      // 调用自定义的树状数组函数，处理获取的数组
      this.cateList = tranListTotreeDatCate(list, 0)
    }, // 获取分组列表
    async getShopGroup() {
      const query = {
        id: undefined,
        aid: 1,
        type: 1,
        page: 1,
        limit: 100
      }
      const { list } = await getShopGroupList(query)
      this.grouplist = list
    },
    // 取消重置原来的数据
    btnCanle() {
      this.formData = {
        id: undefined,
        aid: 1,
        bid: parseFloat(user.state.userInfo.bid),
        cate_id: undefined,
        cate_id2: undefined,
        cate_id3: undefined,
        cate_id4: undefined,
        cate_id5: undefined,
        cate_id6: undefined,
        gid: undefined,
        gid1: undefined,
        gid2: undefined,
        gid3: undefined,
        gid4: undefined,
        gid5: undefined,
        gid6: undefined,
        name: '',
        sub_name: '',
        pic: '',
        pics: '',
        sales: 0,
        detail: '',
        market_price: undefined,
        sell_price: undefined,
        cost_price: undefined,
        givescore: undefined,
        weight: undefined,
        sort: 0,
        status: 1,
        stock: undefined,
        freighttype: 0,
        freightdata: '',
        scoredkmaxset: -1,
        scoredkmaxval: 0,
        guige_list: [],
        tj_proid: '',
        type: 1,
        tag: ''
      }
      this.specList = [{ 'k': 0, 'title': '规格', 'items': [{ 'k': 0, 'title': '默认规格' }] }]
      this.specListTitle = ['规格', this.$t('table.Specificationcode'), this.$t('table.market_price'), this.$t('table.sell_price'), this.$t('table.Bonuspoints'), this.$t('table.images'), '关联服务']
      this.specListVal = [{ namelist: [{ name: '默认规格', rowspan: 1 }], pic: '', market_price: undefined, cost_price: undefined, sell_price: undefined, weight: undefined, stock: undefined, givescore: undefined, barcode: '' }]
      this.$refs.staffPhoto.fileList = []
      this.$refs.picsPhoto.fileList = []
      this.$refs.pic.fileList = []
      this.$refs.child.content = ''
      this.gid = []
      this.freightList1 = []
      this.fuwuList = []
      this.shopList = []
      this.$refs.ruleForm.clearValidate()// 重置校验结果
      this.showDialog = false
    },
    // 选择商品
    selectS(row) {
      this.shopList.push(row.shop_product)
      this.showDialogS = false
    },
    // 选择项目
    selectG(row) {
      const one = {
        id: row.id,
        name: row.name,
        market_price: row.market_price,
        sell_price: row.sell_price,
        cost_price: row.cost_price,
        num: 0
      }
      this.specListVal[this.guanlianId].stock.push(one)
      this.showDialogG = false
    },
    // 选择服务区域
    selectF(row) {
      this.fuwuList.push(row)
      this.showDialogFuwu = false
    },
    // 打开关联项目选择
    openFreight(type) {
      if (type === 'guanlian') {
        this.showDialogG = true
        this.getFreghtList()
      } else if (type === 'shop') {
        this.showDialogS = true
        this.getProductListS()
      } else {
        this.showDialogFuwu = true
        this.getList()
      }
    },
    // 取消服务区域选择
    btnCanle2() {
      this.showDialogFuwu = false
    },
    // 取消关联项目选择
    btnCanleG() {
      this.showDialogG = false
    }, // 取消推荐商品
    btnCanleS() {
      this.showDialogS = false
    },
    // 获取服务区域列表
    async getList() {
      const one = {
        status: 1,
        aid: 1,
        page: 1,
        limit: 1000
      }
      const { list } = await getRegionList(one)
      this.regionlist = list
    },
    // 获取服务项目
    async getListFuWu() {
      this.downloadLoadingG = true
      const { count, list } = await FuShopList(this.queryG)
      this.guanlianlist = list
      this.countG = count

      this.downloadLoadingG = false
    },
    // 点击排序
    paixu(row) {
      row.isedit = true
    },
    // 取消排序
    cancelEdit(row) {
      row.isedit = false
    },
    // 确认排序
    async confirmEdit(row) {
      const data = {
        id: row.shop_product.id,
        sort: parseInt(row.shop_product.sort)
      }
      row.isedit = false
      try {
        await FuProducSort(data)
        this.$message.success(this.$t('prompt.paixuSuccess'))
        this.getProductList()
      } catch (error) {
        this.$message.error(this.$t('prompt.failed'))
      }
    },
    // 搜索
    search() {
      this.query.page = 1
      this.getProductList()
    },
    // 搜索
    searchS() {
      this.queryS.page = 1
      this.getProductListS()
    },
    // 搜索
    searchG() {
      this.queryG.page = 1
      this.getListFuWu()
    },
    clearStatus() {
      this.query.status = 9
    },
    clearGroup() {
      this.query.gid = undefined
    },
    clearCate() {
      this.query.cid = undefined
    },
    // 分页
    changPage(newPage) {
      this.query.page = newPage
      this.getProductList()
    },
    // 分页
    changPageS(newPage) {
      this.queryS.page = newPage
      this.getProductListS()
    },
    // 分页
    changPageG(newPage) {
      this.queryG.page = newPage
      this.getListFuWu()
    },
    // 保存选择对象
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    openDialog() {
      // 判断有icon的数据
      if (this.formData.pic) {
        // 这里我们赋值，同时需要给赋值的地址一个标记 upload: true
        this.$refs.staffPhoto.fileList = [{ url: this.formData.pic, upload: true }]
      }
      if (this.formData.pics) {
        const arr = this.formData.pics.split(',')
        const NewArr = []
        arr.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.picsPhoto.fileList = NewArr
      }
      if (this.formData.detail) {
        this.$refs.child.content = this.formData.detail
      }
    },
    // 移除当前的物流模版
    removeFreightArr(type, index) {
      if (type === 'freight') {
        this.freightList1.splice(index, 1)
      } else if (type === 'shop') {
        this.shopList.splice(index, 1)
      } else {
        this.fuwuList.splice(index, 1)
      }
    },

    // 格式服务区域
    priceFuwuHtml(cellValue) {
      if (cellValue !== undefined && cellValue !== '') {
        const data = JSON.parse(cellValue)
        let html = ''
        data.forEach(element => {
          html += '<b>' + element.district[0].fullname + ':</b><br> '
          element.area.forEach(item => {
            html += item.fullname + ','
          })
          html += '<br> '
        })
        return html
      }
    },
    // 格式物流模版
    pricedataHtml(cellValue) {
      if (cellValue !== undefined && cellValue !== '') {
        const data = JSON.parse(cellValue)
        let html = ''
        data.forEach(element => {
          html += '<b>' + element.region + ':</b><br> ' + element.fristweight + '克以下 R$' + element.fristprice + '，每超出' + element.secondweight + '克加 R$' + element.secondprice + '<br>'
        })
        return html
      }
    }
  }
})
</script>
<style scoped lang="scss">
.select-cate{
    padding: 0 5px;
  }
.shopGoods-item{
  display: flex;
  margin-bottom: 15px;
  .shopGoos_img{
    width: 80px;
    margin-right: 10px;
  }
  .shopGoos_wen{
    width: 200px;
    font-size: 12px;
    line-height: 18px;
    p{
      margin: 0;
    }
  }
  .goodsPrice{
    color: #f60;
    margin-top: 20px;
  }
}
.address-box{
  display: flex;
  align-items: center;
  .address-icon{
    width: 30px;
    margin-right: 20px;
  }
  .address-wen{
    display: flex;
    align-items: center;
    h1{
      font-size: 16px;
      margin-right: 10px;
    }
  }
  .address-area{
    p{
      margin: 0;
    }
  }
}
.shop-item{
  display: flex;
  margin-bottom: 20px;
  .shop-left{
    width: 100px;
    margin-right: 20px;
  }
  .shop-right{
    width:500px;
    p{
      margin: 0;
    }
    .goodsPrice{
      color: #f60;
      margin-top: 10px;
    }
  }
}
.order_information{
  padding-left: 0;
  margin: 0;
  li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f2f2f2;
    padding:0 0 15px 0;
    .information-right{
      display: flex;
      justify-content: right;
      align-items: center;
      p{
        margin: 0;
      }
      .information-img{
        width: 40px;
        margin-right: 10px;
      }
    }

  }
}
.shopOrder-dialog{
  height: auto;
  max-height: 450px;
  overflow-y: auto;
}
.shopOrder-dialog::-webkit-scrollbar{display:none}
.color-red{
  color: #f60;
}
.form-pic-box{
  display: flex;
  margin-top: 20px;
  .formPic{
    margin-right: 10px;
  }
}
.ljm-table{
  thead{
    tr{
      background-color: #f2f2f2;
      th{
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
        position: relative;
        padding: 9px 15px;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
        text-align: left;
      }
    }
  }
  tbody{
    tr{
      margin-top: -1px;
      td{
        position: relative;
        padding: 9px 15px;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
        .layui-input{
          display: inline;
          height: 30px;
          padding-left: 10px;
          line-height: 1.3;
          border-width: 1px;
          border-style: solid;
          background-color: #fff;
          border-radius: 2px;
          border-color: #e6e6e6;
        }
        .guanlian{
          display: flex;
          align-items: center;
        }
        div{
          margin: 5px 0px;
          .layui-btn-sm{
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            font-size: 12px;
            margin-left: 5px;
          }
          .layui-btn-primary{
            border: 1px solid #C9C9C9;
            background-color: #fff;
            color: #555;
          }
          .layui-btn {
              display: inline-block;
              white-space: nowrap;
              text-align: center;
              border-radius: 2px;
              cursor: pointer;
          }
        }
      }
    }
  }
}
.Ggname-prompt{
  margin-top: 10px;
  p{
    font-size: 12px;
    color: #999;
    line-height: 22px;
    margin: 0 0;
  }
}
.shopOrder-dialog{
  height: auto;
  max-height: 650px;
  overflow-y: auto;
}
.tip_ljm{
  font-size: 12px;
    color: #999;
    line-height: 22px;
    margin-left: 10px;
}
.stokForm{
  display: flex;
  p{
    margin: 0 5px 0px 5px;
  }
}
.form-p{
  color: #f60;
  margin: 0;
}
</style>
